﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>陈泳康的个人简历</title>
    <link rel="icon" href="img/favicon.ico" type="image/x-icon">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="ionicons/css/ionicons.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>

    <div id="preloader">
        <div id="status">

            <div class="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar">
            </div>

        </div>
    </div>

    <!-- header -->
    <header class="navbar-fixed-top">
        <nav>
            <ul>
                <li><a href="#about">关于</a></li>
                <li><a href="#experience">技术</a></li>
                <li><a href="#projects">作品</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    <!-- ./header -->

    <!-- home -->
    <div class="section" id="home" data-stellar-background-ratio="0.5">
        <div class="container">
            <div class="disply-table">
                <div class="table-cell" data-aos="fade-up" data-aos-delay="0">
                    <h3>farmer3boxing </h3>
                    <h1>Web 开发者</h1>
                </div>
            </div>
        </div>
    </div>
    <!-- ./home -->

    <!-- about -->
    <div class="section" id="about">
        <div class="container">
            <!-- 右边布局 -->
            <!-- <div class="col-md-6" data-aos="fade-up">
                <h4>01</h4>
                <h1 class="size-50">了解 <br />  我</h1>
                <div class="h-50"></div>
                <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value. Quickly promote premium strategic theme areas vis-a-vis.</p>
                <p>Appropriately maintain standards compliant total linkage with cutting-edge action items. Enthusiastically create seamless synergy rather than excellent value.</p>
                <div class="h-50"></div> <img src="img/Signature.svg" width="230" alt="" />
                <div class="h-50"></div>
            </div>
            <div class="col-md-6 about-img-div"> 
                <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div>
                <img src="img/about-img.jpg" width="400" class="img-responsive" alt="" align="right" data-aos="fade-right" data-aos-delay="0" />
            </div> -->


            <div class="col-md-6 about-img-div">
                <div class="about-border" data-aos="fade-up" data-aos-delay=".5"></div>
                <img src="img/about-img.jpg" width="400" class="img-responsive" alt="" align="left" data-aos="fade-left"
                    data-aos-delay="0" />
            </div>
            <div class="col-md-6" data-aos="fade-up">
                <h4>01</h4>
                <h1 class="size-50">了解 <br /> 我</h1>
                <div class="h-50"></div>
                <p>这个人是条懒狗什么都没有写</p>
                <p>This man is lazy dog didn't write anything</p>
                <div class="h-50"></div> <img src="img/k2.svg" width="300" alt="" />
                <div class="h-50"></div>
            </div>

        </div>
    </div>
    <!-- ./about -->

    <!-- experience  -->
    <div class="section" id="experience">
        <div class="container">
            <div class="col-md-12">
                <h4>02</h4>
                <h1 class="size-50">我的 <br /> 技术</h1>
                <div class="h-50"></div>
            </div>
            <div class="col-md-12">
                <ul class="timeline">
                    <li class="timeline-event" data-aos="fade-up">
                        <label class="timeline-event-icon"></label>
                        <div class="timeline-event-copy">
                            <p class="timeline-event-thumbnail">2020/1/6 - 2020/3/1</p>
                            <h3>CSS</h3>
                            <h4>CSS1-3</h4>
                            <h4>Less</h4>
                            <h4>Sass</h4>
                            <h4>bootstrap</h4>
                        </div>
                    </li>
                    <li class="timeline-event" data-aos="fade-up" data-aos-delay=".2">
                        <label class="timeline-event-icon"></label>
                        <div class="timeline-event-copy">
                            <p class="timeline-event-thumbnail">2020/6/1 - Now</p>
                            <h3>Jvascript</h3>
                            <h4>ES5</h4>
                            <h4>ES6</h4>
                            <h4>jquery</h4>
                            <h4>Ajax</h4>
                            <h4>Git</h4>
                            <h4>webpack</h4>
                            <h4>1/4Vue</h4>
                            <h4>element-ui</h4>
                        </div>
                    </li>
                    <li class="timeline-event" data-aos="fade-up" data-aos-delay=".4">
                        <label class="timeline-event-icon"></label>
                        <div class="timeline-event-copy">
                            <p class="timeline-event-thumbnail">2014/4/1 - Now</p>
                            <h3>adobe</h3>
                            <h4>After Effects</h4>
                            <h4>Premiere Pro</h4>
                            <h4>Photoshop </h4>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ./experience -->
    <!-- projects -->
    <div class="section" id="projects">
        <div class="container">
            <div class="col-md-12">
                <h4>03</h4>
                <h1 class="size-50">我的 <br /> 作品</h1>
            </div>
            <!-- main container -->
            <div class="main-container portfolio-inner clearfix">
                <!-- portfolio div -->
                <div class="portfolio-div">
                    <div class="portfolio">
                        <!-- portfolio_filter -->
                        <div class="categories-grid wow fadeInLeft">
                            <nav class="categories">
                                <ul class="portfolio_filter">
                                    <li><a href="" class="active" data-filter="*">All</a></li>
                                    <li><a href="" data-filter=".css3">CSS3</a></li>
                                    <li><a href="" data-filter=".javascript">JavaScript</a></li>
                                    <li><a href="" data-filter=".banner">banner</a></li>
                                    <li><a href="" data-filter=".html5">HTML5</a></li>
                                    <li><a href="" data-filter=".project">project</a></li>
                                </ul>
                            </nav>
                        </div>
                        <!-- portfolio_filter -->

                        <!-- portfolio_container -->
                        <div class="no-padding portfolio_container clearfix" data-aos="fade-up" id="$class">
                        </div>
                        <!-- end port000000folio_container -->
                    </div>
                    <!-- portfolio -->
                </div>
                <!-- end portfolio div -->
            </div>
            <!-- end main container -->
        </div>
    </div>
    <!-- ./projects -->

    <!-- contact -->
    <div class="section" id="contact">
        <div class="container">
            <div class="col-md-12">
                <h4>04</h4>
                <h1 class="size-50">联系 我</h1>
                <div class="h-50"></div>
            </div>
            <div class="col-md-4" data-aos="fade-up">

                <h3>电话号码</h3>
                <p>+86 13643017986 </p>
                <h3>手机号码</h3>
                <p>+86 13643017986 </p>
                <h3>电子邮件</h3>
                <p>13643017986@163.com</p>
                <h3>社交网络</h3>
                <style>
                    .fa-lg {
                        padding-top: 5px;
                        padding-bottom: 15px;
                    }
                </style>
                <ul class="social">
                    <li><a href="javascript:void(0)" ><i class="fa fa-weixin fa-lg"></i></a></li>
                    <li><a href="tencent://message/?uin=1872227462&Menu=yes& Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"
                        target="_blank"><i class="fa fa-qq fa-lg"></i></a></li>
                    <li><a href="https://steamcommunity.com/id/1872227462/" target="_blank"><i class="fa fa-steam fa-lg"></i></a></li>
                    <li><a hrfunctionef="#"><i class="fa fa-dribbble fa-lg"></i></a></li>
                </ul>
                <div class="clearfix"></div>
                farmer3boxing &copy; 2020.
                <div class="h-50"></div>
            </div>
            <div class="col-md-8" data-aos="fade-up">
                <form class="contact-bg" id="contact-form" name="contact" method="post" novalidate>
                    <input type="text" name="name" class="form-control" placeholder="你的名字 " />
                    <input type="email" name="email" class="form-control" placeholder="你的邮箱" />
                    <input type="text" name="phone" class="form-control" placeholder="电话号码" />
                    <textarea name="message" class="form-control" placeholder="你的信息" style="height:120px"></textarea>
                    <button id="submit" type="submit" name="submit" class="btn btn-glance">发送</button>
                    <div id="success">
                        <p class="green textcenter"> 你的消息发送成功!我将尽快联系。 </p>
                    </div>
                    <div id="error">
                        <p> 有错误,再次尝试更新和提交表单。 </p>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- ./contact -->

    <!--DEMO01-->
    <div id="animatedModal" class="popup-modal">
        <div id="btn-close-modal" class="close-animatedModal close-popup-modal"> <i class="ion-close-round"></i> </div>
        <div class="clearfix"></div>
        <div class="modal-content">
            <div class="container">
                <div class="portfolio-padding">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>作品名(暂时无任何作品)<br /> 类别</h2>
                        <div class="h-50"></div>
                        <p>这里是内容介绍.</p>
                        <p>Here is the introduction.</p>
                        <br />
                        <br /> <img src="img/portfolio/02.jpg" alt="" class="img-responsive" />
                        <br />
                        <br />
                        <p>这里是设计流程介绍.</p>
                        <p>Here is the design process is introduced.</p>
                        <br />
                        <br />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/aos.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/custom.js"></script>
<script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1279624779&web_id=1279624779"></script>
</body>

</html>
<script>
    var $class = document.getElementById('$class');
    let html

    let $name2 = [
    {class: "css3",title:"主标题",title2:"副标题",id:"animatedModal"}, 
    {class: "html5",title:"主标题",title2:"副标题"}, 
    {class: "css3",title:"主标题",title2:"副标题"}, 
    {class: "project",title:"主标题",title2:"副标题"}, 
    {class: "banner",title:"主标题",title2:"副标题"}, 
    {class: "javascript",title:"主标题",title2:"副标题"}, 
    {class: "html5",title:"主标题",title2:"副标题"}, 
    {class: "project",title:"主标题",title2:"副标题"}, 
    {class: "css3",title:"主标题",title2:"副标题"}, 
    {class: "javascript",title:"主标题",title2:"副标题"}, 
    ];

    for (let index = 0; index < $name2.length; index++) {

        const $class    = $name2[index].class,
              $title    = $name2[index].title,
              $id       = $name2[index].id,
              $title2   = $name2[index].title2;
        
        let img = "no";
        html += `<div class="col-md-4 col-sm-6  fashion `+$class+`">
                            <a id="demo`+(index+1)+`" href="#`+$id+`" class="portfolio_item"> <img src="img/portfolio/`+img+`.jpg" alt="image" class="img-responsive" />
                                <div class="portfolio_item_hover">
                                    <div class="portfolio-border clearfix">
                                        <div class="item_info"> <span>`+$title+`</span> <em>`+$title2+`</em> </div>
                                    </div>
                                </div>
                            </a>           
                </div>`

    }
    console.log(html)
    let html2 = html.replace("undefined", "");

    $class.innerHTML = html2;
</script>
